<template>
    <div>
		<el-row style="margin-bottom:20px">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :lg="6">
					<info_label
						:type="common.type4"
						:title="'Patch集成'"
						:num="String(labelsData.patch_counts)"
						:sub="common.subs[3]"
						:to_sub="common.to_sub"
						:cls="common.success"
					></info_label>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="6">
					<info_label
						:type="common.type4"
						:title="'Daily版本'"
						:num="String(labelsData.daily_version_release)"
						:sub="common.subs[0]"
						:to_sub="common.to_sub"
						:cls="common.success"
					></info_label>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="6">
					<info_label
						:type="common.type4"
						:title="'Release版本'"
						:num="String(labelsData.release_version_release)"
						:sub="common.subs[0]"
						:to_sub="common.to_sub"
						:cls="common.success"
					></info_label>
				</el-col>				
			</el-row>
		</el-row>
		<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<span>版本发布数</span>
			</div>
			<div>
				<ve-bar :data="topChartData" :settings="chartSettings" :extend="topExtend"></ve-bar>
			</div>
		</el-card>

		<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<span>版本发布</span>
			</div>
			<div>
				<ve-line
					:data="releaseChartData"
					:settings="releaseChartSettings"
					:data-empty="dataEmpty"
					:data-zoom="dataZoom"
				></ve-line>
			</div>
		</el-card>

		<el-row style="margin-bottom:20px">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :lg="12">
					<el-card class="box-card m-b" shadow="never">
						<div slot="header" class="clearfix">
							<span>Release流程覆盖率</span>
						</div>
						<div>
							<ve-line
								:data="flowCoverData"
								:settings="flowCoverSettings"
								:data-empty="flowEmpty"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="12">
					<el-card class="box-card m-b" shadow="never">
						<div slot="header" class="clearfix">
							<span>发布流程符合度</span>
						</div>
						<div>
							<ve-line
								:data="flowConformityData"
								:settings="flowCoverSettings"
								:data-empty="conformityEmpty"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</el-row>
		<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<span>无效版本比例</span>
			</div>
			<div>
				<ve-line
					:data="versionData"
					:settings="flowCoverSettings"
					:data-empty="versionDataEmpty"
					:data-zoom="dataZoom"
				></ve-line>
			</div>
        </el-card>
        
		<!-- <el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<span>项目列表</span>
			</div>
			<div>
				<el-table
					:data="currentProjectData"
					border
					style="width: 100%; margin-bottom: 20px"
					@sort-change="sortChange">
					<el-table-column prop="project" label="项目名称" :sortable="'custom'"></el-table-column>
					<el-table-column prop="version_release" label="版本发布个数" sortable></el-table-column>
					<el-table-column prop="customer" label="客户" sortable></el-table-column>
					<el-table-column prop="customer_manager" label="客户经理" sortable></el-table-column>
					<el-table-column prop="project_manager" label="项目经理" sortable></el-table-column>
					<el-table-column prop="project_level" label="项目等级" sortable></el-table-column>
					<el-table-column prop="flow_confirmity" label="流程符合度" sortable></el-table-column>
					<el-table-column prop="flow_coverity" label="流程覆盖率" sortable></el-table-column>
					<el-table-column prop="version_rate" label="无效版本比例" sortable></el-table-column>
				</el-table>
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 15, 50, 100]"
					:page-size="currentSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataCount">
				</el-pagination>
			</div>
		</el-card> -->
		<el-card class="box-card m-b" shadow="never">
			<div slot="header" class="clearfix">
				<span>项目列表</span>
			</div>
			<div>
				<el-table
					:data="currentData"
					:border="true"
					:header-cell-style="{background:'#eef1f6'}"
					style="width: 100%; margin-bottom: 20px"
					@sort-change="sortChange">
					<el-table-column align="center" prop="project_name" label="项目名" :sortable="'custom'"></el-table-column>
					<el-table-column align="center" prop="customer" label="客户" sortable></el-table-column>
					<el-table-column align="center" prop="customer_manager" label="客户经理" sortable></el-table-column>
					<el-table-column align="center" prop="project_manager" label="项目经理" sortable></el-table-column>
					<el-table-column align="center" prop="project_level" label="项目等级" sortable></el-table-column>
					<el-table-column align="center" prop="version_release" label="版本发布总数" sortable></el-table-column>
					<el-table-column align="center" prop="daily_version_release" label="版本发布总数(Daily-build)" sortable></el-table-column>
					<el-table-column align="center" prop="release_version_release" label="版本发布总数(Release-build)" sortable></el-table-column>
					<el-table-column align="center" prop="flow_confirmity" label="流程符合度" sortable></el-table-column>
					<el-table-column align="center" prop="flow_coverity" label="流程覆盖率" sortable></el-table-column>
					<el-table-column align="center" prop="version_rate" label="无效版本比例" sortable></el-table-column>
				</el-table>
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 15, 50, 100]"
					:page-size="currentSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataCount">
				</el-pagination>
			</div>
		</el-card>
    </div>
</template>

<script>
import { pagingData } from './utils.js';
import common from '@/components/devops/get_data';
import info_label from '@/components/devops/info_label.vue';
import { getHeader } from '@/app.config';
import 'v-charts/lib/style.css';
import 'echarts/lib/component/dataZoom';
export default {
	props: {
        params: Object
	},
	components: {
		info_label,
    },
    data () {
		this.dataZoom = [{
			type: 'slider',
			start: 0,
			end: 100
		}];
        return {
			common,
			labelsData: {},
			currentPage: 1,
			currentSize: 10,
			currentData: [],
			currentProjectData: [
				{ 'project': 'Gundam', 'customer': '三菱', 'customer_manager': '马强', 'project_manager': '王朝阳', 'project_level': 'A', 'flow_confirmity': '90%', 'flow_coverity': '10%', 'version_rate': '20%' }
			],
            tableData: [],
            dataCount: 0,
			dataEmpty: true,
			versionDataEmpty: false,
            topChartData: {
                columns: ['project_name', 'version_release'],
                rows: []
			},
			topExtend: {
                 series: {
                    barMaxWidth: 20,
                },
            },
            chartSettings: {
				labelMap: {
					version_release: '总数(个)'
				},
                dataOrder: {
                    label: 'version_release',
                    order: 'desc'
                }
			},
			releaseChartData: {
				columns: [
					'update_date',
					'daily_version_release',
					'release_version_release'
				],
				rows: []
			},
			releaseChartSettings: {
				labelMap: {
					daily_version_release: 'Daily-build',
					release_version_release: 'Release-build'
				}
			},
			versionData: {
				columns: ['month','invalid_version_rate'],
				rows: []
			},
			flowCoverData: {
				columns: ['month','cover_rate'],
				rows: []
			},
			flowEmpty: false,
			flowCoverSettings: {
				yAxisType: ['percent'],
				labelMap: {
					coverity_rate: '覆盖率',
					cover_rate: '流程覆盖率',
					conformity: '流程符合度',
					invalid_version_rate: '无效比率'
				}
			},
			conformityEmpty: false,
			flowConformityData: {
				columns: ['month','conformity'],
				rows: []
			},
    }
	},
	methods: {
		init_datas: function(departmentId, dates) {
			this.get_compare_data(departmentId, dates)
			this.get_summary(departmentId, dates)
			this.getTrend(departmentId, dates)
			this.get_daily_data(departmentId, dates)
			this.get_table_data(departmentId, dates)
		},
		sortChange: function(val) {
			var key = val['prop'];
			var compare1 = function(obj1, obj2) {
				var val1 = obj1[key];
				var val2 = obj2[key];
				if (val1 < val2) {
					return -1;
				} else if (val1 > val2) {
					return 1;
				} else {
					return 0;
				}
			};
			var compare2 = function(obj1, obj2) {
				var val1 = obj1[key];
				var val2 = obj2[key];
				if (val1 < val2) {
					return 1;
				} else if (val1 > val2) {
					return -1;
				} else {
					return 0;
				}
			};
			var arr = this.tableData;
			if (val['order'] === 'ascending') {
				this.currentData = pagingData(arr.sort(compare1), this.dataCount, this.currentPage, this.currentSize);
			} else if (val['order'] === 'descending') {
				this.currentData = pagingData(arr.sort(compare2), this.dataCount, this.currentPage, this.currentSize);
			} else {
				key = 'update_date';
				this.currentData = pagingData(arr.sort(compare2), this.dataCount, this.currentPage, this.currentSize);
			}
		},
		handleSizeChange: function(size) {
			this.currentSize = size;
			this.currentData = pagingData(this.tableData, this.dataCount, this.currentPage, this.currentSize)
		},
		handleCurrentChange: function(page) {
			this.currentPage = page;
			this.currentData = pagingData(this.tableData, this.dataCount, this.currentPage, this.currentSize)
		},
		getTrend(departmentId, dates) {
			this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/devops/dept/release/indicator/trend?departmentId=${departmentId}&date=${dates}`, {headers: getHeader()})
			.then(res => {
				if (res.status == 200) {
						if (res.data.code === 200) {
							if(res.data.cover_rate_trend && res.data.cover_rate_trend.length) {
								this.flowEmpty = false
							} else {
								this.flowEmpty = true
							}

							if(res.data.conformity_trend && res.data.conformity_trend.length) {
								this.conformityEmpty = false
							} else {
								this.conformityEmpty = true
							}

							if(res.data.invalid_version_rate_trend && res.data.invalid_version_rate_trend.length) {
								this.versionDataEmpty = false
							} else {
								this.versionDataEmpty = true
							}
							let result1 = res.data.cover_rate_trend.map(val => {
								 return {
									 month: val.month,
									 cover_rate: Number((val.cover_rate).toFixed(2))
								 }
							})

							let result2 = res.data.conformity_trend.map(val => {
								return {
									month: val.month,
									conformity: Number((val.conformity).toFixed(2))
								}
							})

							let result3 = res.data.invalid_version_rate_trend.map(val => {
								return {
									month: val.month,
									invalid_version_rate: Number((val.invalid_version_rate).toFixed(2))
								}
							})
							this.flowCoverData.rows = result1
							this.flowConformityData.rows = result2
							this.versionData.rows = result3						
						} else {
							this.flowEmpty = true
							this.conformityEmpty = true
							this.versionDataEmpty = true
						}
				}
			})
		},
		get_compare_data(departmentId, dates) {
			this.currentData = [];
			this.tableData = [];
			this.dataEmpty = true;
			var self = this
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST + 
                '/api/devops/dept/compare?departmentId=' +
                departmentId + '&date=' + dates + '&page=release',
				{headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							for (var i = 0; i < data.length; i++) {
								var tableDict = {
									project_name: data[i]['project_name'],
									version_release: data[i]['version_release'] + '次',
									daily_version_release: data[i]['daily_version_release'] + '次',
									release_version_release: data[i]['release_version_release'] + '次'
								};
								self.tableData.push(tableDict);
							};
							self.dataCount = self.tableData.length;
							self.currentPage = 1;
							self.currentSize = 10;
							self.dataEmpty = false;
							if (self.dataCount === 0) {
								self.currentData = [];
								self.dataEmpty = true;
							} else {
								self.currentData = pagingData(self.tableData, self.dataCount, self.currentPage, self.currentSize)
							}
							self.topChartData.rows = data.slice(0, 10)
						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		},
		get_table_data(departmentId, dates) {
			this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/devops/dept/release/kpi?departmentId=${departmentId}&date=${dates}`, {headers: getHeader()})
				.then((res) => {
					if(res.status === 200) {
						if(res.data.code === 200) {
							this.currentProjectData = res.data.data
						}
					}
				})
		},
		get_daily_data(departmentId, dates) {
			var _self = this
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST + 
                '/api/devops/dept/daily/summary?departmentId=' +
                departmentId + '&date=' + dates + '&page=release',
				{headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							_self.releaseChartData.rows = data
						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		},
		get_summary(departmentId, dates) {
			var _self = this
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST + 
                '/api/devops/dept/summary?departmentId=' +
                departmentId + '&date=' + dates + '&page=release',
				{headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							_self.labelsData = data
						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		}
	},
	watch: {
        params: {
				handler: function(val) {
					const departmentId = val.departmentId === 'undefined' ? '' : val.departmentId;
					const dates = val.time === 'undefined' ? '' : val.time;
					this.init_datas(departmentId, dates);
				},
				deep: true
			}
	},
	mounted() {
      const departmentId = this.params.departmentId === 'undefined' ? '' : this.params.departmentId;
      const dates = this.params.time === 'undefined' ? '' : this.params.time;
			this.init_datas(departmentId, dates);
	}
}
</script>
